<template>
  <!-- 加工收料-新增 -->
  <div class="e-form">
     <BillTop title="加工收料新增" @cancel="cancel"></BillTop>
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form :model="formData" label-width="150px" :rules="rules" ref="formData" class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否计加工费：" prop="isIncludingProcessingFee">
                 <el-radio-group v-model="formData.isIncludingProcessingFee">
                            <el-radio :label="1">是(外部加工)</el-radio>
                            <el-radio :label="0">否(自行加工)</el-radio>
                          </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="所属机构：">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购人员：">
                <el-select v-model="formData.purchasingPersonnelName" placeholder="请选择">
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收料人员：">
                <el-select v-model="formData.receivingPersonnelName" placeholder="请选择">
                  <el-option
                    v-for="item in userLists"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userName"
                  >
                  </el-option>
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
                <el-form-item label="加工日期：" prop="receivingDate">
                <el-date-picker
                  v-model="formData.receivingDate"
                  type="date"
                 :placeholder="geyDate()"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="状态：">
                {{ '草稿' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="buttons">
          <span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
      <el-button type="primary" style="background: #2e61d7" @click="save('formData')"
        >保存</el-button
      >
      <el-button @click="cancel()">关闭</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { mapState } from 'vuex'
import request from '@/api/materials/processReceiving.js'

export default {
    data () {
        return {
            //表单数据
            formData: {
                'amount': 0,
                'billId': '',
                'billNo': '',
                'contractId': '',
                'contractNumber': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'isIncludingProcessingFee': null,
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'processingUnitId': '',
                'processingUnitName': '',
                'purchasingPersonnelId': '',
                'purchasingPersonnelName': '',
                'quantity': 0,
                'receivingDate': '',
                'receivingPersonnelId': '',
                'receivingPersonnelName': '',
                'receivingType': 0,
                'remarks': '',
                'state': '0',
                'workId': ''
            },
            orgId: '', //机构id
            orgName: '', //机构名称
            userList: [], //采购人员数据
            userLists: [], //收料人员数据
            purchasingPersonnelName: '', //当前登录用户
            receivingPersonnelName: '', //当前登录用户
            isSkip: false, //是否跳转
            //验证
            rules: {
                receivingDate: [
                    { required: true, message: '请选择收料日期', trigger: 'change' }
                ],
                isIncludingProcessingFee: [
                    { required: true, message: '请选择是否计时加工费', trigger: 'change' }
                ],
            }
        }
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify,
        }),

    },
    components: {},
    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.orgId = data.userInfo.orgInfo.orgId
        this.formData.orgName = data.userInfo.orgInfo.orgName
        this.formData.purchasingPersonnelName = localStorage.getItem('userName')
        this.formData.receivingPersonnelName = localStorage.getItem('userName')
        this.getuser()
        this.geyDate()
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        getuser () {
            this.$Ajax
                .httpGet({
                    url: '/hr/user/getUserUnderOrg',
                    params: {
                        orgId: this.orgId,
                    },
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                })
                .then(res=>{
                    this.userList = res
                    this.userLists = res
                })
        },

        //保存按钮
        save (formName) {
            if(this.formData.receivingDate === '') {
                this.formData.receivingDate = this.geyDate()
            }
            this.$refs[formName].validate(valid => {
                if (valid) {
                    request.AddprocessReceiving(this.formData)
                        .then(res => {
                            this.clientPop('suc', '保存成功,是否继续', ()=>{
                                this.$router.replace({
                                    path: '/processReceivingEdit',
                                    query: {
                                        billid: res,
                                        name: 'receivingMaterials'
                                    }
                                })
                            }, this.cancel)
                        })
                } else {
                    return false
                }
            })
        },
        //取消按钮
        cancel () {
            this.$router.replace('/processReceiving')
        },
        //获取当前时间
        geyDate () {
            var myDate = new Date()
            let y = myDate.getFullYear()
            let m = myDate.getMonth() + 1
            let d = myDate.getDate()
            m = m < 10 ? '0' + m : m //小于10补0
            d = d < 10 ? '0' + d : d //小于10补0
            console.log('date', `${y}-${m}-${d}` )
            return `${y}-${m}-${d}`
        },

    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
